<template>
  <div>
    <div class="flex items-center">
      <div class="total">共 {{ total }} 条</div>
      <div class="w-1px h-16px bg-[#ddd] mx-16px line"></div>
      <div class="flex items-center btnbox">
        <el-button @click="handleExport">订单导出</el-button>
        <el-button @click="handelExportAndMark" v-if="status != 3">导出并标记已处理</el-button>
        <el-button @click="handleAudit" v-if="status != 3">已处理</el-button>
      </div>
      <div class="w-1px h-16px bg-[#ddd] mx-16px line"></div>
      <div class="text-[#333] text-[14px] flex items-center time">
        <div class="mr-4px">创建时间</div>
        <div class="flex flex-col relative arrowbox" @click="handleSort">
          <Icon
            icon="ep:caret-top"
            :color="sort === 'DESC' ? '#999' : '#333'"
            :size="12"
            class="absolute bottom-[-1px] cursor-pointer"
          />
          <Icon
            icon="ep:caret-bottom"
            :color="sort === 'DESC' ? '#333' : '#999'"
            :size="12"
            class="absolute top-[-1px] cursor-pointer"
          />
        </div>
      </div>
    </div>

    <!-- 审核提示 -->
    <ComfirmPops ref="auditRef" type="tips" title="确定提示" @confirm="getAuditRes">
      <template #content>
        <div class="">确认要处理该订单吗？</div>
      </template>
    </ComfirmPops>
    <!-- 导出并标记已处理 -->
    <ComfirmPops ref="exportMarkRef" type="tips" title="确定提示" @confirm="getExportMarkRes">
      <template #content>
        <div class="">确认要导出并标记为已处理吗？</div>
      </template>
    </ComfirmPops>
    <!-- 导出处理 -->
    <!-- <ComfirmPops ref="exportRef" type="tips" title="确定提示" @confirm="getExportRes">
      <template #content>
        <div class="">确认要导出吗？</div>
      </template>
    </ComfirmPops> -->
  </div>
</template>

<script setup lang="ts">
import { ElLoading } from 'element-plus'
import * as TradeOrderApi from '@/api/mall/trade/order'
import download from '@/utils/download'
import { usePageLoading } from '@/hooks/web/usePageLoading'
import { deepCopy } from '@/utils'

const { loadStart, loadDone } = usePageLoading()

const message = useMessage()
const emit = defineEmits(['updateList', 'updateSort', 'exportRun'])
defineOptions({ name: 'BatchAction' })
const props = defineProps({
  total: {
    type: Number,
    default: 0
  },
  sort: {
    type: String,
    default: 'desc'
  },
  selectedRows: {
    type: Array,
    default: () => []
  },
  status: {
    type: Number,
    default: 0
  }
})

const loading = ref()

const auditRef = ref()

const exportRef = ref()

const exportMarkRef = ref()

/**
 * 审核
 */
const getAuditRes = async (res: boolean) => {
  if (res) {
    // 执行接口
    try {
      loadStart()
      const orderNo = props.selectedRows.map((item) => item.orderNo)
      await TradeOrderApi.updateOrderStatus({ orderNo, status: 11 })
      message.success('操作成功')
    } finally {
      auditRef.value.hide()
      loadDone()
      emit('updateList')
    }
  }
}
/*
 * 审核显示
 */
const handleAudit = () => {
  if (!props.selectedRows.length) {
    message.error('请选择订单')
    return
  }
  //需要判断选中的订单是否都有已处理的
  const isAll = props.selectedRows.every((item) => item.status === 10)
  if (!isAll) {
    message.error('所选订单中包含有已经处理过的订单')
    return
  }
  auditRef.value.show()
}

/**
 * 导出并标记已处理
 */
const handelExportAndMark = () => {
  if (!props.selectedRows.length) {
    message.error('请选择订单')
    return
  }
  //需要判断选中的订单是否都有已处理的
  const isAll = props.selectedRows.every((item) => item.status === 10)
  if (!isAll) {
    message.error('所选订单中包含有已经处理过的订单')
    return
  }
  exportMarkRef.value.show()
}

/**
 *  执行导出并标记已处理
 */
const getExportMarkRes = async (value: boolean) => {
  if (value) {
    try {
      loadStart()
      const orderNo = props.selectedRows.map((item) => item.orderNo)
      await TradeOrderApi.updateOrderStatus({ orderNo, status: 11 })
      message.success('操作成功')
      //处理后的数据
      const orderNos = deepCopy(props.selectedRows).map((item) => {
        item.status = 11
        return item.orderNo
      })
      const curStatus = props.status
      emit('exportRun',{orderNos,curStatus})
    } finally {
      exportMarkRef.value.hide()
      loadDone()
      emit('updateList')
    }
  }
}
/**
 * 导出
 */
const handleExport = async () => {
  // exportRef.value.show()
  try {
    // 导出的二次确认
    await message.exportConfirm()
    const curStatus = props.status
    emit('exportRun',{curStatus})
  } catch {
  } finally {
  }
}

const handleSort = () => {
  emit('updateSort', props.sort === 'DESC' ? 'ASC' : 'DESC')
}
</script>

<style lang="scss" scoped>
:deep(.el-button) {
  border-radius: 10px;
}
</style>
